<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="../js/utils.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        var oBox = document.querySelector('#box');

        // 要变化属性的终点的对象
        var target = {
            width:500,
            height:500,
            left:1000,
            opacity:0.1
        }
        // 定义两个对象，begin change
        var begin = {};// 要变化的属性的起始位置
        var change = {};// 要变化的属性要改变的距离
        var curPos = {};// 每一个时间间隔各个变化属性应该到达的位置

        // 通过target对象，计算出target对象中要改变的每一个属性的 开始位置[begin]和要变化的值[change]
        
        for(var attr in target){
            begin[attr] = utils.css(oBox,attr);
            change[attr] = target[attr] - begin[attr];
        }
        console.log(target,begin,change);

        var duration = 2000;
        var t = 0;
        var timeStep = 10;

        function linear(t,b,s,d){
            return s / d * t + b;
        }

        oBox.timer = setInterval(()=>{
            // 1. 累加时间
            t += timeStep;
            // 2. 判断停止条件
            if(t >= duration){
                clearInterval(oBox.timer);
                // 设置目标位置
                utils.css(oBox, target);
                return;
            }   
            // 3. 计算 t 时间 当前变化到的位置
            for(var attr in target){
                curPos[attr] = linear(t,begin[attr], change[attr],duration);
                // 1. curPos[width]   attr width  begin[width]  change[width]
                // 2. curPos[height]  attr height begin[height] change[height]
                // 3. ...
            }
            // console.log('curPos', curPos);
            // 设置值
            utils.css(oBox,curPos);
        }, timeStep);
    </script>
</body>
</html>